<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>企业级模板库 | 智能管理系统</title>
  <style>
    /* 企业级视觉规范 */
    :root {
      --primary-color: #2C3E50;
      --accent-color: #E74C3C;
      --success-color: #27AE60;
      --background: #F9F9F9;
      --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    body {
      font-family: 'Helvetica Neue', system-ui, sans-serif;
      background: var(--background);
      color: #333;
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }

    /* 智能搜索系统 */
    .search-system {
      margin-bottom: 2rem;
      position: relative;
    }

    .search-input {
      width: 100%;
      padding: 1.2rem 3rem;
      border: 2px solid #ddd;
      border-radius: 50px;
      font-size: 1.1rem;
      transition: all 0.3s ease;
      background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23999" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>') no-repeat 1rem center;
    }

    .search-input:focus {
      border-color: var(--primary-color);
      box-shadow: var(--card-shadow);
      outline: none;
    }

    /* 模板卡片系统 */
    .template-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
    }

    .template-card {
      background: white;
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: var(--card-shadow);
      position: relative;
      transition: transform 0.3s ease;
    }

    .template-card:hover {
      transform: translateY(-5px);
    }

    /* 操作按钮组 */
    .card-actions {
      position: absolute;
      top: 1rem;
      right: 1rem;
      display: flex;
      gap: 0.8rem;
    }

    .action-btn {
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .action-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .preview-btn svg {
      width: 20px;
      height: 20px;
      stroke: var(--primary-color);
    }

    .save-btn svg {
      width: 18px;
      height: 18px;
      fill: var(--success-color);
    }

    /* 模板信息 */
    .template-meta {
      margin-top: 1.5rem;
    }

    .template-title {
      font-size: 1.2rem;
      color: var(--primary-color);
      margin-bottom: 0.5rem;
    }

    .template-description {
      color: #666;
      line-height: 1.5;
      font-size: 0.95rem;
    }

    /* 预览模态框 */
    .preview-modal {
      /* 添加模态框样式 */
    }
  </style>
</head>
<body>
<!-- 搜索系统 -->
<div class="search-system">
  <input type="text"
         class="search-input"
         placeholder="搜索模板（营销/通知/邀请函...）"
         id="templateSearch">
</div>

<!-- 模板列表 -->
<div class="template-grid">
  <div class="template-card">
    <div class="card-actions">
      <button class="action-btn preview-btn">
        <svg viewBox="0 0 24 24">
          <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
        </svg>
      </button>
      <button class="action-btn save-btn">
        <svg viewBox="0 0 24 24">
          <path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z"/>
        </svg>
      </button>
    </div>

    <div class="template-meta">
      <h3 class="template-title">会员续费提醒模板</h3>
      <p class="template-description">
        专业会员续费提醒系统，集成倒计时组件与优惠信息展示模块，
        有效提升续费率32%
      </p>
    </div>
  </div>

  <!-- 更多模板... -->
</div>

<script>
  // 实时搜索功能
  const searchInput = document.getElementById('templateSearch');
  const templateCards = document.querySelectorAll('.template-card');

  searchInput.addEventListener('input', (e) => {
    const keyword = e.target.value.toLowerCase();
    templateCards.forEach(card => {
      const text = card.textContent.toLowerCase();
      card.style.display = text.includes(keyword) ? 'block' : 'none';
    });
  });

  // 保存功能
  document.querySelectorAll('.save-btn').forEach(btn => {
    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      btn.classList.toggle('saved');
      // 这里添加保存逻辑
    });
  });

  // 预览功能
  document.querySelectorAll('.preview-btn').forEach(btn => {
    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      // 显示预览模态框
    });
  });
</script>
</body>
</html>